<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名师详情</title>
    <link rel="stylesheet" href="/assets/home/css/mui.min.css"  />
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css"  />
    <link rel="stylesheet" href="/assets/home/css/teacher_info.css">
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>

    <link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
    <script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
</head>
<body>
    <div class="header wow">
        <div class="left">
            <div class="avatar">
                <img src="{$teacher.avatar_text}" alt="">
            </div>
        </div>

        <div class="right">
            <div class="name">{$teacher.name}</div>
            <span>课程：{$teacher.subject_num}</span>
            <span>职位：{$teacher.job}</span>
            <span>粉丝：<a href="/home/educator/follow?id={$teacher.id}">{$teacher.follows|count}</a></span>

            <div class="follow">
                <button class="btn {$isFollow?'mui-btn-danger':'mui-btn-primary'}">{$isFollow?'取消':''}关注</button>
                <!-- <button class="btn mui-btn-danger">取消关注</button> -->
            </div>
        </div>
    </div>

    <div class="content wow">
        {$teacher.content}
    </div>

    <div class="mui-input-row mui-search search wow">
        <input type="search" placeholder="请输入名师课程名称" name="search" />
    </div>

    <!-- 课程列表 -->
    <div id="box" class="mescroll">
        <ul class="mui-table-view">
        </ul>
    </div>

</body>
</html>
<script>
    var keyword = ''
    var id = {$teacher.id}

    $('.btn').click(function(){
        $.post('/home/educator/teacherInfo',{id})
        .then((data)=>{
            if(data.code){
                $(this).prop('class',data.isFollow?'mui-btn-danger':'mui-btn-primary')
                $(this).text(data.isFollow?'取消关注':'关注')
            }
            mui.toast(data.msg, {duration: 3000})

        },(jqXHR)=>{
            mui.toast('请求失败，请检查网络', {duration: 3000})
        })
    })

    $("input[name='search']").change(function(){
        keyword = $(this).val()
        downCallback()
    })
    
    var mescroll = new MeScroll("box", {
        down: {
            callback: downCallback
        },
        up: {
            callback: upCallback,
            // isBounce: false, 
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 5 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
            noMoreSize: 5,
            toTop: {
                src: "/assets/home/plugin/mescroll/mescroll-totop.png",
                offset: 100,
                duration: 300,
                supportTap : true,
            },
            empty: {
                warpId:	"box",
                tip: "暂无相关数据~"
            },
        }
    });

    function downCallback() {
        $('#box .mui-table-view').empty()
        mescroll.resetUpScroll()
    }

    function upCallback(page) 
    {
        $('.mescroll-totop').css('bottom','70px')
        var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
        var pageSize = page.size; // 页长, 默认每页10条
        $.post('/home/course/index',{pageNum,pageSize,keyword,id})
        .then((data)=>{
            var curPageData = data.curPageData; // 接口返回的当前页数据列表
            var totalPage = data.totalPage; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
            mescroll.endByPage(curPageData.length, totalPage);
            
            if(page.num == 1) $('#box .mui-table-view').empty() // 第一页,先置空,再追加
            setListData(curPageData);
        },
        (e)=>{
            mescroll.endErr();
        })
    }

    function setListData(curPageData){
        teamHtml = ''
        for(var [i,data] of curPageData.entries()){
            // console.log(data)
            teamHtml += `<li class="mui-table-view-cell mui-media wow" data-wow-delay="100ms">
                <a class="item" href="/home/course/details?id=${data.id}">
                    <div class="thumb">
                        <img class="img" src="${data.thumbs_text}">
                    </div>
                    <div class="info">
                        <h5 class="title">${data.title}</h5>
                        <p class="content mui-ellipsis">课程分类：${data.category.name}</p>
                        <p class="content mui-ellipsis">创建时间：${data.date}</p>
                        <p class="bottom">
                            <span class="like mui-icon mui-icon-starhalf">
                                <span>${data.likes_num}</span>
                            </span>
                            <span class="price">￥${data.price}</span>
                        </p>
                    </div>
                </a>
            </li>`
        }
        $('#box .mui-table-view').append(teamHtml)
    }
    
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: "#box" // 可选滚动容器选择器，否则使用窗口
    }).init();

</script>